<template>
  <div id="add-new">
    <input type="text" v-model="newItem" />
    <button @click="handleAdd">添加</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      newItem: ''
    }
  },
  methods: {
    handleAdd() {
      if (this.newItem == "") {
        alert("不能为空");
        return;
      }
      this.$emit("submitNewItem", this.newItem);
      this.newItem = ""
    }
  }
}


















// export default {
//   data() {
//     return {
//       newItem: ''
//     }
//   },
//   methods: {
//     handleAdd() {
//       if (this.newItem == "") {
//         alert("不能为空");
//         return;
//       }
//       this.$emit("submitNewItem", this.newItem);
//       this.newItem = ""
//     }
//   }
// }


// import {ref} from 'vue'
// export default {
  
//     setup(props,context){
//       let newItem = ref('')
//      function handleAdd() {
//       if (newItem.value == "") {
//         alert("不能为空");
//         return;
//       }
//       context.emit("submitNewItem", newItem.value);
//       newItem.value = ""
//     }
//     return{
//       handleAdd,
//       newItem
//     }
//     }
// }

// import {ref} from 'vue'
// import { defineEmits } from 'vue';
// let newItem = ref('')
// let emit =defineEmits(["submitNewItem"]);
//      function handleAdd() {
//       if (newItem.value == "") {
//         alert("不能为空");
//         return;
//       }
//       emit('submitNewItem',newItem.value)
//       newItem.value = ""
//     }





// import {ref} from 'vue'
// import {defineEmits} from 'vue'


//       let  newItem = ref('') 
//        let emit = defineEmits(['submitNewItem']);

//     function handleAdd() {
//       if (newItem.value == "") {
//         alert("不能为空");
//         return;
//       }
//       emit('submitNewItem', newItem.value);
//       newItem.value = ""
//     }




</script>

<style scoped>
input {
  border: none;
  outline: none;
  width: 300px;
  height: 30px;
  border: solid 1px #999;
  border-radius: 5px;
  padding-left: 10px;
}

button {
  border: none;
  outline: none;
  width: 80px;
  height: 36px;
  background-color: #42b983;
  border-radius: 5px;
  margin-left: 10px;
  color: #fff;
}
</style>